<template>
  <div>
    <div class="profile" @click="$router.push('/edit')">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL +userInfo.head_img"
        alt
        class="avatar"
      />
      <img v-else src="../assets/01.jpg" alt class="avatar" />
      <div class="info">
        <div class="name">
          <!-- 根据性别区分图标,可以v-if或动态 class key:value 类名:是否应该显示的布尔值 -->
          <span
            class="iconfont"
            :class="{iconxingbienan:userInfo.gender==1,iconxingbienv:userInfo.gender==0}"
          ></span>
          {{userInfo.nickname}}
        </div>
        <div class="date" v-if="userInfo.create_date">{{userInfo.create_date.split('T')[0]}}</div>
      </div>
      <div class="iconfont iconjiantou1"></div>
    </div>
    <personalBar labelText="我的关注" descText="关注的用户" @handleClick="$router.push('/attention')"></personalBar>
    <personalBar labelText="我的跟帖" descText="跟帖/回复" @handleClick="$router.push('/mycomments')"></personalBar>
    <personalBar labelText="我的收藏" descText="文章/视频" @handleClick="$router.push('/star')"></personalBar>
    <personalBar labelText="设置" @handleClick="$router.push('/edit')"></personalBar>
    <personalBar labelText="退出登录" @handleClick="loginout"></personalBar>
  </div>
</template>

<script>
import personalBar from "../components/personalBar";

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  components: {
    personalBar,
  },
  methods: {
    logLabel(label) {
      console.log(label);
    },
    loginout() {
      // 1.清理之前登录的状态
      localStorage.clear();
      // 跳转到首页
      // this.$router.push("/");
      this.$router.replace("/");
    },
  },
  created() {
    // console.log(localStorage.getItem("token"));
    // console.log(localStorage.getItem("userId"));
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      // headers: {
      //   // 标准写法,在token 前加一个 "Bearer" 标识
      //   Authorization: "Bearer " + localStorage.getItem("token"),
      // },
    }).then((res) => {
      // console.log(res.data);
      this.userInfo = res.data.data;
      // console.log(this.userInfo);
    });
  },
};
</script>

<style lang="less" scoped>
.profile {
  padding: 24/360 * 100vw;
  display: flex;
  align-items: center;
  border-bottom: 4/360 * 100vw solid #666;
  .avatar {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    object-fit: cover;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding-left: 16/360 * 100vw;
    .name {
      font-size: 16/360 * 100vw;
    }
    .iconxingbienan {
      color: blue;
    }
    .iconxingbienv {
      color: pink;
    }
    .date {
      font-size: 14/360 * 100vw;
      color: #888;
      margin-top: 6/360 * 100vw;
    }
  }
}
</style>